<template>
    <div id="emailID" ref="emailRef">
      <div class="title">
        <span class="line"></span>
        <span>{{$t('wechat.shoucang')}}</span>
      <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="printPdf"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
      </div>
      <div class="mainContentBox">
        <!-- <a-input-search :placeholder="$t('wechat.searckKey')" v-model="" style="width: 200px;margin-bottom:10px;float:right;" @search="onSearch" /> -->
      <el-table border height="72vh" stripe :data="tableData" style="width: 100%">
        <el-table-column
          prop="subject"
          label="标题"
          >
          <template slot-scope="scope">
            {{scope.row.subject}}
            <!-- <img class="biaozhuimg" src="../../../assets/bizozhu/biaozhu.png" alt=""> -->
          </template>
        </el-table-column>
    <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-button size="mini">{{$t('wechat.biaoji')}}</el-button> -->
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">查看详情</el-button>
  
            <div class="badgeBox" v-if="scope.row.cntRemark>0">{{$t('wechat.remarked')}}</div>
              <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(scope.row)"  size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
        </template>
      </el-table-column>
      </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="offset"
            :page-size="limit"
            layout="total, prev, pager,  next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
       <a-modal
        v-model="modal2Visible"
        :maskClosable="false"
        :getContainer="getRefsAff"
        :title="detailsData.subject"
        :dialog-style="{ top: '20px' }"
        width="80%"
        @ok="() => (modal2Visible = false)"
      >
        <div class="emailBox">
          <div class="headerBox">
            <p>From：<i class="el-icon-message"></i> {{detailsData.senderlist}} <span style="margin-left:20px;">{{formateDate(detailsData.sendtime)}}</span> </p>
            <p>To：<i class="el-icon-message"></i> {{detailsData.account}}<span style="margin-left:20px;">{{formateDate(detailsData.recvtime)}}</span></p>
          </div>
          <div>
            {{detailsData.preview}}
          </div>
          <p>{{detailsData.replaylist}}</p>
          <div class="mainContent">
            <div v-if="detailsData.htmlmsg" v-html="detailsData.htmlmsg">
            </div>
            <div v-else v-html="detailsData.textmsg">
            </div>
          </div>
        </div>
      </a-modal>
  
      <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
        :maskClosable="false" title="提示" @ok="handleOk">
        <p>{{$t('wechat.biaojibeizhu')}}</p>
        <p><el-input type="textarea" v-model="remark"></el-input></p>
      </a-modal>
    </div>
  </template>
  
  <script>
  import print from 'print-js'
  import html2canvas from "html2canvas"
  import { getEmailInfo } from '@/api/email/email_api'
  import { parseTime } from '@/utils/index'
  import { sendMarkOrderApi } from '@/api/markApi/index'
  
  export default {
    name: "noteBook2",
    props:['sendData'],
    data() {
      return {
        showRemark:false,
        remark:'',
        id:'',
        tableData: [
        ],
        headerTitle:[],
        modal2Visible:false,
        offset:1,
        limit:20,
        total:0,
        detailsData:''
      };
    },
    watch:{
      '$store.state.account.email2':function(){
        if(this.sendData.list_offset){
        this.offset=this.sendData.list_offset;
        this.limit=this.sendData.list_limit;
      }else{
        this.offset=1;
      }
        this.init()
      }
    },
    created(){
      if(this.sendData.list_offset){
        this.offset=this.sendData.list_offset;
        this.limit=this.sendData.list_limit;
      }else{
        this.offset=1;
      }
      this.init();
    },
    methods:{
      handleOk(){
          let data={
          navigation_list:sessionStorage.getItem('arr').split(','),
          model:this.sendData.model,
          isChat:0,
          account_id:this.sendData.account_id,
          app_name:'',
          proof_num:this.sendData.proof_num,
          list_offset:this.offset,
          list_limit:this.limit,
          remark:this.remark,
          class:this.sendData.class,
          label:this.sendData.label,
          id:Number(this.id)
        }
        sendMarkOrderApi(data).then(res=>{
          this.showRemark=false;
          this.$message({
            message: '标记数据成功！',
            type: 'success'
          });
          this.onSearch()
        })
      },
      // 添加标记点
      markOrder(item){
        this.id=item.id;
        this.showRemark=true;
      },
      handleSizeChange(val) {
        this.limit=val
        this.init()
      },
      handleCurrentChange(val) {
        this.offset=val
        this.init()
      },
      getRefsAff(){
        return this.$refs.emailRef
      },
      onSearch(){
        this.init()
      },
      handleEdit(row){
        this.detailsData=row
        this.modal2Visible=true
      },
      formateDate(date){
        return parseTime(date)
      },
      init(){
        let data={
          proof_num:this.sendData.proof_num,
          account_id:Number(this.sendData.account_id),
          model:this.sendData.model,
          offset:this.offset,
          limit:this.limit
        }
        getEmailInfo(data).then(res=>{
          this.tableData=res.data;
          this.total=res.data[0].cnt;
        })
      },
      //打印
      printPdf(){
          html2canvas(document.getElementById('emailID')).then(function(canvas) {
            var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
            print(imgageData, 'image');
          });
      },
      handleClick(){
  
      }
    }
  };
  </script>
  
  <style scoped>
  .badgeBox{
    width: 50px;
    height: 23px;
    border-radius: 10px;
    color: #fff;
    background: #f56c6c;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
    float: right;
  }
  .biaozhuimg{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  #emailID{
    position: relative;
  }
  .mainContent{
    height: 60vh;
    overflow-y: auto;
  }
  .headerBox{
    height: 70px;
    background: rgb(243, 243, 243);
    border-radius: 5px;
    padding: 10px 20px;
  }
  .emailBox{
    height: 70vh;
    padding: 15px;
  }
  .block{
      text-align: center;
      margin-top: 10px;
  }
  .title {
    width: 100%;
    height: 50px;
    background: #2b2f3a;
    margin-bottom: 20px;
    font-size: 0.1rem;
    line-height: 50px;
    padding-left: 20px;
    color: #fff;
  }
  .line {
    width: 8px;
    height: 100%;
  }
  .mainContentBox {
    padding: 0 10px;
  }
  </style>
  